<template>
  <div class="mod-config">
    <basic-container>
        <navigationRenWuShu :sign="{a:false,b:true,c:false,d:false,e:false,f:false}"></navigationRenWuShu>
      <div class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">指标审核</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
                <div class="flex">
                    <div>
                        <el-form :model="form"  :inline="true" class="form-inline">
                        <el-form-item label="发约人姓名">
                            <el-input v-model="form.userName" placeholder="发约人姓名" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="发约人职务">
                            <el-input v-model="form.userName" placeholder="发约人职务" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人姓名">
                            <el-input v-model="form.userName" placeholder="受约人姓名" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人职务">
                            <el-input v-model="form.userName" placeholder="受约人职务" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="签订级别">
                            <el-select :clearable="true" v-model="form.signLevel" placeholder="请选择签订级别"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="(item,index) in qdjbList" :key="index" :label="item.name" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="zhiShow=='1'" label="指标类别">
                            <el-select :clearable="true" v-model="form.zhibiaoType" placeholder="请选择指标类别"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item  v-if="zhiShow=='1'" label="指标项">
                            <el-select :clearable="true" v-model="form.gzZt" placeholder="请选择指标项"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="item in xiangList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-select :clearable="true" v-model="form.gzZt" placeholder="请选择部门"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-select :clearable="true" v-model="form.shouyueZhiwu" placeholder="请选择职务"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="item in jobList" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft" @click="getDataList()">检索</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
           </div>
        </div>

            <div>
                <div class="mt10" style="overflow:hidden">
                    <div style="float:right">
                        <el-button type="primary" @click="okAll" v-loading.fullscreen.lock="fullscreenLoading">批量同意</el-button>
                        <el-button type="primary" @click="backAll" v-loading.fullscreen.lock="fullscreenLoading2">批量驳回</el-button>
                    </div>
                </div>
            </div>
            <el-table v-if="zhiShow=='1'"  :data="tableData" style="width: 100%;margin-top:20px" height="60vh" v-loading="dataListLoading" ref="tableRef">
                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column prop="zhibiaoType" label="指标类别" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="zhibiaoName" label="指标名称" min-width="120" header-align="center" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="information" label="岗位信息" min-width="120" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-popover
                            placement="left"
                            width="300"
                            trigger="hover">
                             <div style="padding: 10px">
                              <div v-for="item in scope.row.informationList">
                                <span style="color:#0bbf4a">{{ item}}</span>
                              </div>
                             </div>
                            <div slot="reference" class="name-wrapper">
                                <span style="color:#ff3300">{{scope.row.information}}</span>
                            </div>

                        </el-popover>

                    </template>
                </el-table-column>
                <el-table-column prop="personNum" label="人数" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="dataProvider" label="数据提供部门/人" min-width="120" header-align="center" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.tgLx=='2'">{{scope.row.targetUserName}}</span>
                    <span v-else>{{scope.row.dataProvider}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="auditStatus" label="状态" min-width="120" header-align="center" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.auditStatus == '0'">待审批</span>
                    <span v-if="scope.row.auditStatus == '2'">通过</span>
                    <span v-if="scope.row.auditStatus == '1'">驳回</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="230" header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="checkDetails(scope.row)">查看#</el-button>
                        <el-button  v-if="scope.row.auditStatus == '0'" type="primary" plain @click="ok(scope.row.id)">同意</el-button>
                        <el-button  v-if="scope.row.auditStatus == '0'" type="primary" plain @click="back(scope.row.id)">驳回</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="avue-crud__pagination"  v-if="zhiShow==1" >
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                            layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            </div>
            <rwszbForm ref="rwszbFormRef" v-if="zhiShow==2" :rwszbForm='rwszbForm' v-on:zhibiaoChild='zhibiaoChild'></rwszbForm>
      </div>

    </basic-container>
  </div>
</template>

<script>
import rwszbForm from '@/views/hetongrenwu/components/renwushuzb-form.vue'
import {getPage,ok, okAll, back, backAll} from '@/api/hetongrenwu/gongzuorenwushu/workAssignzb'


export default {
    components:{
        rwszbForm
    },
    data(){
        return{
            form:{},
            radio:'1',
            radioTwo:1,
            tableData:[],
            pageIndex:1,
            pageSize: 10,
            totalPage: 0,
            zhiShow:1,
            rwszbForm:{},
            gridData:[
                {
                zhiwu: '经理',
                name: '王小虎',
                status: '退回'
                }
            ],
            qdjbList:[
                  {name:'所属单位部门负责人',value:'1'},
                  {name:'本部一般管理人员',value:'2'},
                  {name:'所属单位一般管理人员',value:'3'}
            ],
            categoryList:[
                {value:"控制类",label:"控制类"}
            ],
            xiangList:[
                {value:"人服比",label:"人服比"}
            ],
            departmentList:[
                {value:"薪酬服务部门",label:"薪酬服务部门"}
            ],
            jobList:[
                {value:"主办",label:"主办"}
            ],
            searchadvanced: true,
            searchheight: '0',
            dataListLoading: false,
            fullscreenLoading:false,
            fullscreenLoading2:false,
        }
    },
    created() {
    this.getDataList()

    },
    methods:{
         ok(id){
            this.$confirm('是否要通过该指标?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                ok(id).then(res => {
                    this.$message.closeAll();
                    this.$message({
                        type: 'success',
                        message: '提交成功!'
                    });
                    this.getDataList()
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '提交失败!'
                    });
                    this.getDataList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });
            });
        },
        back(id){
            this.$confirm('是否要驳回该指标?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                back(id).then(res => {
                    this.$message.closeAll();
                    this.$message({
                        type: 'success',
                        message: '驳回成功!'
                    });
                    this.getDataList()
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '提交失败!'
                    });
                    this.getDataList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });
            });
        },
        //批量通过
        okAll(){
            const rows = this.$refs.tableRef.selection
            if(rows.length > 0){
                this.$confirm('是否要通过' + rows.length + '条指标?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fullscreenLoading = true;
                    okAll(rows).then(res => {
                        this.$message.closeAll();
                        this.$message({
                            type: 'info',
                            message: res.data.data + '条指标已通过'
                        });
                        this.fullscreenLoading = false;
                        this.getDataList()
                    }).catch(() => {
                        this.$message({
                            type: 'error',
                            message: '提交失败!'
                        });
                        this.fullscreenLoading = false;
                        this.getDataList()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '请选择指标通过!'
                });
            }
        },
        //批量驳回
        backAll(){
            const rows = this.$refs.tableRef.selection
            if(rows.length > 0){
                this.$confirm('是否要驳回' + rows.length + '条指标?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fullscreenLoading2 = true;
                    backAll(rows).then(res => {
                        this.$message.closeAll();
                        this.$message({
                            type: 'info',
                            message: res.data.data + '条指标已驳回'
                        });
                        this.fullscreenLoading2 = false;
                        this.getDataList()
                    }).catch(() => {
                        this.$message({
                            type: 'error',
                            message: '提交失败!'
                        });
                        this.fullscreenLoading2 = false;
                        this.getDataList()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '请选择指标驳回!'
                });
            }
        },
      // 获取数据列表
        getDataList() {
          this.dataListLoading = true
          getPage(Object.assign({
            signLevel:this.form.signLevel,

            current: this.pageIndex,
            size: this.pageSize
          })).then(response => {
            this.tableData = response.data.data.records
            this.totalPage = response.data.data.total
          })
          this.dataListLoading = false
        },
        searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        //提交
        submit(){
            this.$confirm('是否要提交该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '提交成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });
                });
        },
        //编辑查看
        checkDetails(row){
            this.zhiShow=2;
            this.rwszbForm={
                enter:2,
            }
            var params=Object.assign(row,this.rwszbForm)
            this.$nextTick(() => {
              this.$refs.rwszbFormRef.init(params)
            })
        },

        //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1
            }
            this.getDataList();

        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val
            this.getDataList()
        },
    }
}
</script>

<style>

</style>
